<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, name, index) in data_all.img_list" :key="index"><img class="swiper-lazy"  :data-src="item.url" alt=""></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
export default {
  name: 'love-swiper',
  props: {
    data_all: {
      type: Object,
      required: false,
      validator: function (value) {
        return true;
      }
    }
  },
  methods: {
    create_swiper() {
      new Swiper('.swiper-container', {
        lazy: {
          loadPrevNext: true,
        },
        autoplay: this.data_all.option.autoplay,
        direction: 'horizontal'
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import 'node_modules/swiper/swiper.scss';
  .swiper-container {
    width: 100%;
    height: auto;
  }
  img{
    width: 100%;
  }
</style>
